{extend name="main" /}
{block name="body"}
<style>
.store-total-container {
    font-size: 14px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.store-total-container .store-total-icon {
    top: 45%;
    right: 8%;
    font-size: 65px;
    position: absolute;
    color: rgba(255, 255, 255, 1);
}

.store-total-container .store-total-item {
    color: #fff;
    line-height: 3em;
    padding: 8px 25px;
    position: relative;
}

.store-total-container .store-total-item > div:nth-child(2) {
    font-size: 42px;
    line-height: 42px;
}
.button-group{
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
    .log-summary{
        display: flex;
        justify-content: space-between;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">数据统计</div>
        <div class="layui-card-body">
            <div class="think-box-shadow store-total-container notselect">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="store-total-item nowrap" style="background:#06b9a8">
                            <div>在线人数</div>
                            <div>{$tabList['online']}</div>
                            <div>当前在线的用户数</div>
                        </div>
                        <i class="store-total-icon layui-icon layui-icon-reply-fill"></i>
                    </div>
                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="store-total-item nowrap" style="background:#3db9dc">
                            <div>群聊总量</div>
                            <div>{$tabList['groupNumber']}</div>
                            <div>当前创建的群聊数量</div>
                        </div>
                        <i class="store-total-icon layui-icon layui-icon-cart"></i>
                    </div>
                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="store-total-item nowrap" style="background:#f1b53d">
                            <div>用户总量</div>
                            <div>{$tabList['userNumber']}</div>
                            <div>当前用户总数量</div>
                        </div>
                        <i class="store-total-icon layui-icon layui-icon-user"></i>
                    </div>
                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="store-total-item nowrap" style="background:#ff5d48;">
                            <div>待处理</div>
                            <div>11</div>
                            <div>待处理信息</div>
                        </div>
                        <i class="store-total-icon layui-icon layui-icon-notice"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">数据概览</div>
                <div class="layui-card-body layui-text">
                    <div id="my_chart" style="width: 100%;height: 500px;"></div>
                </div>
            </div>
        </div>

        <!--系统操作-->
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">日常维护</div>
                <div class="layui-card-body layui-weihu ">
                    <div class="button-group">
                        <a href="javascript:;" onclick="showList();" class="layui-btn layui-btn-primary layui-btn-sm">查看日志</a>
<!--                        <a href="{:url('sys/view_log')}" class="layui-btn layui-btn-primary layui-btn-sm">下载日志</a>-->
                        <a href="{:url('sys/clear_log')}" data-title="确定要清除日志嘛？" class="layui-btn layui-btn-primary layui-btn-sm ajax_get2">清除日志</a>
                        <a href="{:url('sys/debug_open',['sys_debug'=>$sys_debug])}" class="layui-btn layui-btn-primary layui-btn-sm ajax_get2">{$sys_debug==1?'关闭调试':'开启调试'}</a>
                    </div>
                    <div class="log-summary">
                        <span>日志大小：{$log_file['size']|format_bytes}</span>
                        <span>日志数：{$log_file['count']}</span>
                    </div>
                </div>
            </div>
        </div>
        <!--服务器信息-->
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body layui-text">
                    <table class="layui-table">
                        {foreach name="server_info" item="vo"}
                        {if condition="$k%2==1"}<tr>{/if}
                        <td width="100">{$key}：</td>
                        <td>{$vo}</td>
                        {if condition="$k%2==0"}</tr>{/if}
                        {/foreach}
                        {if condition="count($caches)%2==1"}<td>&nbsp;</td><td>&nbsp;</td></tr>{/if}
                    </table>
                </div>
            </div>
        </div>


    </div>

    <div class="layui-row ">
        <div class="layui-col-md9">

        </div>
    </div>
</div>

<!--日志模板展示-->
<script type="text/html" id="view_log">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            {{#  layui.each(d, function(index, item){ }}
                <li class="{{#if (index==0){ }} layui-this {{# } }}">{{ item.module }}模块日志</li>
            {{# }); }}
        </ul>
        <div class="layui-tab-content" >
            {{#  layui.each(d, function(index, item){ }}

                <div class="layui-tab-item {{#if (index==0){ }} layui-show {{# } }}">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>日志大小</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{#  layui.each(item.list, function(index2, item2){ }}
                        <tr>
                            <td><a href="{:url('sys/view_log')}?file={{ item2.pathname }}" onclick="return view_log_fun(this,'{{ item2.filename }}');">{{ item2.filename }}</a> </td>
                            <td>{{ item2.size}}</td>
                            <td><button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="view_log_delete(this,'{{ item2.pathname }}')">删除</button> </td>
                        </tr>
                        {{#  }); }}
                        </tbody>
                    </table>
            </div>
            {{# }); }}
        </div>
    </div>
</script>

{/block}

{block name="js"}
<script src="/static/admin/js/echarts.js"></script>
<!--维护事件-->
<script>
    var laytpl = layui.laytpl;
    //查看日志列表
    function showList(){
        $.get("{:url('sys/view_log')}",function(res){
            laytpl(view_log.innerHTML).render(res.data,function(html){
                layer.open({
                    type: 1,
                    skin: 'layui-layer-black', //加上边框
                    area: ['600px'], //宽高
                    content: html
                });
            })
        })
        return false;
    }

    function view_log_fun(obj,title) {
        var url = $(obj).attr('href');
        console.log(url,'=--url')
        ajax_open("查看日志 "+title,url);

        return false;
    }

    //删除某个日志
    function view_log_delete(obj,file) {
        $.post("{:url('sys/view_log_delete')}",{file:file},function(res){
            if(res.code==1){
                $(obj).parents('tr').remove();
            }
            layer.msg(res.msg)
        })

        return false;
    }
</script>
<!--图形报表-->
<script>
    var myChart = echarts.init(document.getElementById('my_chart'));
    option = {
        title: {
            text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {},
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    myChart.setOption(option);
</script>
{/block}